<template>
  <div>
    <!-- 列表 -->
    <basic-layout title="防疫新闻" :showAddBtn="false">
      <div class="columnFlex">
        <van-row class="listCon">
          <van-pull-refresh
            class="pullRefresh"
            v-model="refreshLoading"
            @refresh="onRefresh"
          >
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="listData.length ? '没有更多了' : ''"
              @load="onLoad"
            >
              <van-swipe-cell v-for="val in listData" :key="val.epidNewsId">
                <div class="cellContent" @click="handleDetail(val)">
                  <div class="top">
                    <div class="flexTit">
                      <div class="title">
                        {{ val.epidNewsTitle }}
                      </div>
                    </div>
                  </div>
                  <div class="bottom">
                    <div class="content">
                      {{ val.epidNewsContent }}
                    </div>
                    <div class="source">
                      {{ val.epidNewsSource }}
                      {{ val.epidNewsTime }}
                    </div>
                  </div>
                </div>
              </van-swipe-cell>
            </van-list>

            <van-empty
              v-if="!loading && !listData.length"
              class="custom-image"
              :image="require('../../../../assets/images/empty.png')"
              description="暂无数据"
            />
          </van-pull-refresh>
        </van-row>
      </div>
    </basic-layout>
    <!-- 新增/详情/编辑 弹出框 -->
    <fullscreenModal
      :modal="fullscreenModal"
      :isAdd="false"
      label="新闻"
      :isShowEdit="currentParam.appStatus == '1'"
      :showSubmit="currentParam.appStatus == '1' && editType == 'detail'"
      :editType="editType"
      @handleClose="fullscreenModal = false"
      @handleCancel="editType = 'detail'"
    >
      <detail v-show="editType == 'detail'" ref="detailRef"></detail>
    </fullscreenModal>
    <full-loading v-if="loading"></full-loading>
  </div>
</template>

<script>
import {
  getPageForNews,
  queryNewDetail,
} from "@/api/srvAssurance/epidprevention/news/news";
import detail from "./detail.vue";
export default {
  components: {detail },
  data() {
    return {
      formData: {
        keyword: "",
        pageNum: 1,
        pageSize: 20,
      },
      loading: false,
      finished: false,
      refreshLoading: false,
      fullscreenModal: false,
      totalPage: 0, //总页数
      isAdd: false,
      editType: "",
      listData: [], // 列表数据
      currentParam: {}, // 保存当前查看详情的row数据
    };
  },
  created() {
    if (sessionStorage.getItem("prjData")) {
      var prjData = JSON.parse(sessionStorage.getItem("prjData"));
      this.projectId = prjData.projectId || "";
    }
  },
  mounted() {
    this.getSearch();
  },
  methods: {
    // 获取表格数据
    getSearch() {
      this.loading = true;
      getPageForNews(this.formData)
        .then((res) => {
          this.loading = false;
          this.refreshLoading = false;
          if (res.code === 1000 && res.data) {
            this.listData = [...this.listData, ...res.data.records];
            if (this.listData.length >= res.data.total) {
              this.finished = true;
            }
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
        });
    },
    onRefresh() {
      this.refreshLoading = false;
      this.finished = false;
      this.listData = [];
      this.formData.pageNum = 1;
      this.getSearch();
    },
    onLoad() {
      this.formData.pageNum++;
      this.getSearch();
    },
    // 重置
    handleReset() {
      this.formData = {
        keyword: "",
        pageNum: 1,
        pageSize: 20,
      };
      this.onRefresh();
    },

    // 查看详情
    async handleDetail(param) {
      this.fullscreenModal = true;
      this.editType = "detail";
      this.isAdd = false;
      var detailInfo = [];
      let item = param;
      this.currentParam = param;
      this.$refs.detailRef.getData(detailInfo);
      this.loading = true;
      let res = await queryNewDetail(`?epidNewsId=${param.epidNewsId}`);
      if (res.status == "1000" && res.data) {
        item = res.data;
        this.currentParam = res.data;
      }
      this.loading = false;
      detailInfo = [
        {
          title: "标题",
          prop: "epidNewsTitle",
          value: item.epidNewsTitle,
        },
        {
          title: "内容",
          prop: "epidNewsContent",
          value: item.epidNewsContent,
        },
        {
          title: "发布时间",
          prop: "epidNewsTime",
          value: item.epidNewsTime,
        },
        {
          title: "来源",
          prop: "epidNewsSource",
          value: item.epidNewsSource,
        },
      ];
      this.$refs.detailRef.getData(item);
    },
  },
};
</script>

<style scoped lang="less">
.listCon {
  .cellContent {
    .top {
      padding: 0 10px;
      box-sizing: border-box;
    }
    .bottom {
      margin-top: 3px;
      padding: 3px 10px 0;
      border-top: 1px solid #eee;
    }
    .title {
      font-size: 15px;
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .content {
      // background-color: #f7f7f7;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .source {
      font-size: 12px;
      color: rgb(149, 149, 149);
    }
    .time {
      font-size: 5px;
    }
  }
}

//轮播条
// .listCon {
//   .cellContent {
//     .top {
//       padding: 0 0px;
//       box-sizing: border-box;
//     }
//     .title{
//       font-weight:normal;
//       font-size: 15px;
//       color: rgb(149, 149, 149);
//     }
//   }
// }
</style>
